---
title: "Align Self"
# description: "Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis."
description: "用于控制单个 flex 或网格项如何沿其容器的交叉轴定位的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/alignSelf'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Auto

<!-- Use `self-auto` to align an item based on the value of the container's `align-items` property: -->
使用 `self-auto` 根据容器的 `align-items` 属性的值来对齐一个项目：

```html emerald
<template preview class="p-6">
  <div class="flex items-stretch h-24 space-x-2">
    <div class="flex-1 rounded-md bg-emerald-300 text-white text-2xl font-extrabold flex items-center justify-center">1</div>
    <div class="self-auto flex-1 rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center">2</div>
    <div class="flex-1 rounded-md bg-emerald-300 text-white text-2xl font-extrabold flex items-center justify-center">3</div>
  </div>
</template>

<div class="flex items-stretch ...">
  <div>1</div>
  <div class="**self-auto** ...">2</div>
  <div>3</div>
</div>
```

## Start

<!-- Use `self-start` to align an item to the start of the container's cross axis, despite the container's `align-items` value: -->
使用 `self-start` 将一个项目对齐到容器交叉轴的起点，无视容器的 `align-items` 值：

```html amber
<template preview class="p-6">
  <div class="flex items-stretch h-24 space-x-2">
    <div class="flex-1 rounded-md bg-amber-300 text-white text-2xl font-extrabold flex items-center justify-center">1</div>
    <div class="self-start flex-1 rounded-md bg-amber-500 text-white text-2xl font-extrabold flex items-center justify-center py-3">2</div>
    <div class="flex-1 rounded-md bg-amber-300 text-white text-2xl font-extrabold flex items-center justify-center">3</div>
  </div>
</template>

<div class="flex items-stretch ...">
  <div>1</div>
  <div class="**self-start** ...">2</div>
  <div>3</div>
</div>
```

## Center

<!-- Use `self-center` to align an item along the center of the container's cross axis, despite the container's `align-items` value: -->
使用 `self-center` 沿着容器的交叉轴中心对齐一个项目，无视容器的 `align-items` 值：

```html purple
<template preview class="p-6">
  <div class="flex items-stretch h-24 space-x-2">
    <div class="flex-1 rounded-md bg-purple-300 text-white text-2xl font-extrabold flex items-center justify-center">1</div>
    <div class="self-center flex-1 rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center py-3">2</div>
    <div class="flex-1 rounded-md bg-purple-300 text-white text-2xl font-extrabold flex items-center justify-center">3</div>
  </div>
</template>

<div class="flex items-stretch ...">
  <div>1</div>
  <div class="**self-center** ...">2</div>
  <div>3</div>
</div>
```

## End

<!-- Use `self-end` to align an item to the end of the container's cross axis, despite the container's `align-items` value: -->
使用 `self-end` 将一个项目对齐到容器的交叉轴末端，无视容器的 `align-items` 值：

```html rose
<template preview class="p-6">
  <div class="flex items-stretch h-24 space-x-2">
    <div class="flex-1 rounded-md bg-rose-300 text-white text-2xl font-extrabold flex items-center justify-center">1</div>
    <div class="self-end flex-1 rounded-md bg-rose-500 text-white text-2xl font-extrabold flex items-center justify-center py-3">2</div>
    <div class="flex-1 rounded-md bg-rose-300 text-white text-2xl font-extrabold flex items-center justify-center">3</div>
  </div>
</template>

<div class="flex items-stretch ...">
  <div>1</div>
  <div class="**self-end** ...">2</div>
  <div>3</div>
</div>
```

## Stretch

<!-- Use `self-stretch` to stretch an item to fill the container's cross axis, despite the container's `align-items` value: -->
使用 `self-stretch` 来拉伸一个项目以填充容器的横轴，无视容器的 `align-items` 值：

```html fuchsia
<template preview class="p-6">
  <div class="flex items-stretch h-24 space-x-2">
    <div class="flex-1 rounded-md bg-fuchsia-300 text-white text-2xl font-extrabold flex items-center justify-center">1</div>
    <div class="self-stretch flex-1 rounded-md bg-fuchsia-500 text-white text-2xl font-extrabold flex items-center justify-center py-3">2</div>
    <div class="flex-1 rounded-md bg-fuchsia-300 text-white text-2xl font-extrabold flex items-center justify-center">3</div>
  </div>
</template>

<div class="flex items-stretch ...">
  <div>1</div>
  <div class="**self-stretch** ...">2</div>
  <div>3</div>
</div>
```

## 响应式

<!-- To control the alignment of a flex item at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:self-end` to apply the `self-end` utility at only medium screen sizes and above. -->
要在特定的断点处控制 flex 项目的对齐，可以在任何现有的功能类前添加 `{screen}:` 前缀。例如，使用 `md:self-end` 来仅在中等尺寸及以上的屏幕应用 `self-end` 功能。

```html
<div class="items-stretch ...">
  <div class="self-auto **md:self-end** ...">
    <!-- ... -->
  </div>
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### 变体

<Variants plugin="alignSelf" name="align-self" />

### 禁用

<Disabling plugin="alignSelf" name="align-self" />
